<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
<style>
    .box1{
        width: 450px;
        height: 600px;
        background-color: aqua;
    }
    .box-normal{
        width: 150px;
        height: 150px;
        background-color: purple;
    }
    .box-relative{
        width: 150px;
        height: 150px;
        background-color: yellow;
        position: relative;
    }
    .box2{
         width: 450px;
        height: 600px;
        background-color: aqua;
    }
    .box-absolute{
        width: 150px;
        height: 150px;
        background-color: pink;
        position: absolute;
        left: 160px;
    }
    .box3{
       width: 450px;
        height: 600px;
        background-color: pink;
    }
    .box-fixed{
        width: 150px;
        height: 150px;
        background-color: brown;
        position: fixed;
         right:0  /*意思是这一模块的右侧距离网页的右侧边界为0个单位 */
    }

</style>
</head>
<body>
    <h1 style="font-size: 30px;">相对定位</h1>
    <div class="box1">
        <div class="box-normal"></div>
        <div class="box-relative"></div>
        <div class="box-normal"></div>
    </div>


<!-- 绝对定位于相对定位不同，绝对定位脱离了原来的基础，右一些悬浮的感觉在里面，相当于所操作的图片悬浮到了原图片的上层 -->
    <h2 style="font-size: 30px;">绝对定位</h2>
    <div class="box2"> 
        <div class="box-normal"></div>
        <div class="box-absolute"></div>
        <div class="box-normal"></div>
    </div>
<!-- 固定定位常见于导航栏，或者是页边的小广告 -->
    <h3 style="font-size: 30px;">固定定位</h3>
    <div class="box3">
        <div class="box-normal"></div>
        <div class="box-fixed"></div>
        <div class="box-normal"></div>
    </div>

</body>
</html>